<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../CSS/settleement.css">
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="../images/logo.png" width="120px" height="80px" alt="">
        </div>
        <div class="search">
            <input type="text" placeholder="请输入图书名字">
            <button><img src="../images/btn.png" alt=""></button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="./login.html">登录/注册</a></li>            
                <li><a href="./settlement.html">购物车</a></li>
                <li><a href="./shop.html">商城</a></li>
                <li><a href="./contact.html">联系客服</a></li>
                <li><a href="./service.html">售后</a></li>
            </ul>
        </div>
    </div>
		<div class="title warp">
			<h3>全部商品</h3>
			
			<div >
				<span id="">配送至</span>
				<select >
					<option >广州</option>
					<option >深圳</option>
					<option >东莞</option>
					<option >珠海</option>
				</select>
			</div>
		</div>
		<div class="tips warp">
			<ui>
				<li><input type="checkbox">全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ui>
		</div>
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="../images/10.png" width="80px" height="100px"/> </li>
		  	  	<li class="info_3"><a>【图书购物】《雷雨》</a></li>
		  	  	<li class="info_4"><a>个数：一本</a> </li>
		  	  	<li class="info_5">￥35.00</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥35.00</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
		  
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="../images/22.png" width="80px"/> </li>
		  	  	<li class="info_3"><a>【图书购物】《明亮的夜晚》</a></li>
		  	  	<li class="info_4"><a>个数：一本</a> </li>
		  	  	<li class="info_5">￥10.00</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥10.00</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
		  
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="../images/111.png" width="80px" height="100px"/> </li>
		  	  	<li class="info_3"><a>【图书购物】教材帮 必修1 物理 RJ (人教)</a></li>
		  	  	<li class="info_4"><a>个数：一本</a> </li>
		  	  	<li class="info_5">￥24.60</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥24.60</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
			<div class="balance warp">
				<ul class="balance_ul1">
				<li><input type="checkbox">全选</li>
				<li>删除选中商品</li>
				<li>移到我的关注</li>
				<li>清除下柜商品</li>
			</ul>
			
			<ul class="balance_ul2">
				<li class="butt">去结算</li>
			</ul>
			<div id="checkoutMessage"></div>
			</div>
			

    </div>
	<div class="tool">
        <a href="./settlement.html" class="on tool-item1">购物车</a>
        <a href="./contact.html" class="tool-item2">联系<br>客服</a>
        <a href="./person.html" class="tool-item3">个人<br>资料</a>
        <a id="goTop" class="tool-item4" onclick="goTop()"><span class="top-arrow"></span>顶部</a>
        <a href="./service.html" class="tool-item5">反馈</a>
        <a href="../index.html" class="tool-item5">首页</a>
    </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        var checkboxes = document.querySelectorAll('.info input[type="checkbox"]');
        var checkoutButton = document.querySelector('.balance_ul2 .butt');
        var checkoutMessage = document.getElementById('checkoutMessage');

        checkboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', updateSelectedCount);
        });

        checkoutButton.addEventListener('click', function() {
            checkoutMessage.innerHTML = '祝您购物愉快，下次再来呀~';
        });

        function updateSelectedCount() {
            var selectedCount = document.querySelectorAll('.info input[type="checkbox"]:checked').length;
            checkoutMessage.innerHTML = ''; 
            checkoutMessage.innerHTML = '已选择' + selectedCount + '件商品'; 
        }
    });
</script>
</body>
</html>